

<!-- 

    表格类，
    接收tableData数据，展示表格
    接收tableHeader数据，展示表头
    接收tableOperation数据，展示表格操作列

 -->


<script>


const tableData = [
    {
        date: '2016-05-03',
        name: 'Tom',
    },
    {
        date: '2016-05-02',
        name: 'Tom',
    },
    {
        date: '2016-05-04',
        name: 'Tom',
    },
    {
        date: '2016-05-01',
        name: 'Tom',
    },
    {
        date: '2016-05-01',
        name: 'Tom',
    },
    {
        date: '2016-05-01',
        name: 'Tom',
    },
    {
        date: '2016-05-01',
        name: 'Tom',
    },

]

const tableHeader = [
    {
        prop: 'date',
        label: '时间',
        width: '180',
        fixed: true,
    },
    {
        prop: 'name',
        label: '名字',
        width: '180',
        fixed: false,
    },
]

// 表格操作按钮必定固定在右边
const tableOperation = [
    {
        name: '详情',
        type: 'success',
        handleClick: 'handleDetal',
    },
    {
        name: '修改',
        type: 'primary',
        handleClick: 'handleUpdate',
    },
    {
        name: '删除',
        type: 'danger',
        handleClick: 'handleDelete',
    },
]

export default {
    name: 'dashbaordDefaultContent',
    data() {
        return {
            tableData: tableData,
            tableHeader: tableHeader,
            tableOperation: tableOperation,
        }
    },
    methods: {

    },
}
</script>

<template>
    <div id="container">
        <el-table :data="tableData" width="100%" height="400px" border>
            <el-table-column type="selection" width="55" />
            <el-table-column v-for="(item, index) in tableHeader" :key="index" :prop="item.prop" :label="item.label"
                :width="item.width" :fixed="item.fixed">
            </el-table-column>

            <el-table-column label="操作" fixed="right" width="150">
                <template #default>
                    <el-space wrap alignment="center">
                        <el-button v-for="(item, index) in tableOperation" :key="index" :type="item.type" size="small"
                            @click="item.handleClick">
                            {{ item.name }}</el-button>
                    </el-space>
                </template>
            </el-table-column>
        </el-table>

        <el-pagination v-model:current-page="currentPage4" v-model:page-size="pageSize4" :page-sizes="[100, 200, 300, 400]"
            :small="small" :disabled="disabled" :background="background" layout="total, sizes, prev, pager, next, jumper"
            :total="400" @size-change="handleSizeChange" @current-change="handleCurrentChange" class="bottom-pagination" />
    </div>
</template>


<style scoped lang="scss">
$header-height: 60px;

#container {
    // background-color: pink;
    width: 100%;
    height: 100%;
    position: relative;
    padding: 20px;
    overflow: hidden;

    .bottom-pagination {
        margin-top: 20px;
    }
}
</style>